<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("modules.invoice.invoice") }}
    </PageTitle>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :current-page="pageNo"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="handleCurrentChange"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            ref="name"
            v-model="userName"
            clearable
            :placeholder="$t('common.customer_name')"
            @clear="clearUserName"
            @focus="getKeyId($event)"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-permission="{ permission: '10401006.QUERY' }"
            type="primary"
            class="w-8"
            @click="getInvoiceList"
          >
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="invoiceList" stripe>
        <el-table-column prop="oaBillNum" :label="$t('modules.invoice.invoice_number')" />
        <el-table-column :label="$t('common.customer_name')" prop="userName">
          <template v-slot="scope">
            <div>
              <el-tooltip placement="top-start">
                <template #content>
                  <div style="max-width: 300px; line-height: 160%">
                    <span
                      >{{ $t("common.customer_type") }}:
                      {{ scope.row.characterCode }} (ID: {{ scope.row.keyId }})</span
                    ><br /></div
                ></template>
                <div>
                  {{ scope.row.userName }}
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('modules.invoice.pay_time')" prop="paymentTime">
          <template v-slot="scope">
            <div>
              <el-tooltip placement="top-start">
                <template #content>
                  <div style="max-width: 300px; line-height: 160%">
                    <span>{{ scope.row.paymentTime }}</span
                    ><br /></div
                ></template>
                <div>
                  {{ scope.row.paymentDate }}
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="billAmount" :label="$t('modules.invoice.amount')" />
        <el-table-column :label="$t('common.status')">
          <template>
            <el-tag size="small" type="success" disable-transitions>
              {{ $t("modules.invoice.success") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          <!-- 查看invoice详情 -->
          <template v-slot="scope">
            <el-button
              class="w-8"
              text
              @click="
                () =>
                  $router.push({
                    path: '/service-management/oa-bill/detail',
                    query: { invoiceId: scope.row.billId },
                  })
              "
            >
              <svg-icon icon-class="View" />
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 获取用户姓名的对话框 -->
    <el-dialog
      :title="$t('common.customer_name')"
      v-model="getUserNameVisible"
      top="20px"
      width="65%"
      @close="userNameDialogClose"
    >
      <el-card
        shadow="never"
        :body-style="{ padding: '0px' }"
        :current-page="namePageNo"
        :page-size="namePageSize"
        :total="nameTotalCount"
        @current-change="handleNameCurrentChange"
      >
        <div style="margin: 10px">
          <el-input
            ref="name"
            v-model="condition"
            clearable
            size="small"
            :placeholder="$t('common.name_id')"
            style="width: 500px; margin-right: 10px"
            @clear="clearSearchName"
          />
          <el-button
            type="primary"
            class="align-middle p-1.5"
            size="small"
            @click="getKeyId($event)"
          >
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
          <div style="float: right">
            <el-button
              style="border: none; margin-right: 10px"
              type="primary"
              class="p-2"
              size="medium"
            >
              <table-column-filter
                :list="settingList"
                :default-setting="defaultSettings"
                v-model:settings="settings"
                domain="flycare"
              />
            </el-button>
          </div>
        </div>

        <el-table ref="customerData" height="600" :data="customerData" stripe>
          <!-- <el-table-column property="keyId" :label="$t('common.customer_id')" width="120" align="center" /> -->
          <el-table-column property="name" :label="$t('common.customer_name')" />
          <el-table-column label="OID">
            <template v-slot="scope">
              <div>
                <el-tooltip placement="top-start">
                  <template #content>
                    <div style="max-width: 300px; line-height: 160%">
                      <span>{{ scope.row.oid }}</span>
                    </div></template
                  >
                  <div>
                    {{ scope.row.oidSimple }}
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="oaId" :label="$t('common.oa_id')" />
          <el-table-column property="oaName" :label="$t('common.oa_name')" />
          <el-table-column
            v-if="showHeader('SHORT_NAME')"
            key="shortName"
            property="shortName"
            :label="$t('common.short_name')"
          />
          <el-table-column
            v-if="showHeader('ADDRESS')"
            key="address"
            property="address"
            :label="$t('common.address')"
          />
          <el-table-column
            v-if="showHeader('LINKMAN')"
            key="linkMan"
            property="linkMan"
            :label="$t('common.link_man')"
          />
          <el-table-column
            v-if="showHeader('MOBILE')"
            key="mobile"
            property="mobile"
            :label="$t('common.mobile')"
          />
          <el-table-column
            v-if="showHeader('EMAIL')"
            key="email"
            property="email"
            :label="$t('common.email')"
          />

          <el-table-column width="120" align="center">
            <template v-slot="scope">
              <el-button
                v-model="radio"
                type="primary"
                size="small"
                @click="confirmUserName(scope.row)"
                >{{ $t("common.confirm") }}</el-button
              >
              <!-- <el-radio v-model="radio" :label="scope.row.keyId" style="color: #fff;padding-left: 10px; margin-right: -25px;" @change.native="getCurrentRow(scope.row)" /> -->
            </template> </el-table-column
          >>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getInvoices } from "@/api/invoice";
import { getUserKeyId } from "@/api/user";
import { toTime, toThousands, toTenYMD } from "@/utils/index";
import TableColumnFilter from "@/components/page-setting/table-column-filter";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  name: "ServiceManagementOABill",
  components: {
    TableColumnFilter,
    PageTitle,
  },
  data() {
    return {
      settings: {
        conditions: [],
        columns: [],
      },
      loading: false,
      condition: "",
      getUserNameVisible: false,
      totalCount: undefined,
      pageNo: 1,
      pageSize: 10,
      customerData: [],
      userName: "",
      userData: {
        characterCode: "",
        keyId: "",
      },
      invoiceList: [],
    };
  },
  computed: {
    settingList() {
      return {
        columns: [
          {
            title: this.$t("common.short_name"),
            code: "SHORT_NAME",
          },
          {
            title: this.$t("common.address"),
            code: "ADDRESS",
          },
          {
            title: this.$t("common.link_man"),
            code: "LINKMAN",
          },
          {
            title: this.$t("common.mobile"),
            code: "MOBILE",
          },
          {
            title: this.$t("common.email"),
            code: "EMAIL",
          },
        ],
      };
    },
    defaultSettings() {
      return {
        columns: [],
      };
    },
  },
  mounted() {
    this.$store.commit("app/ADD_KEEP_ALIVE_LIST", "ServiceManagementOABill");
    this.getInvoiceList();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== "detailInvoice") {
      this.$store.commit("app/REMOVE_KEEP_ALIVE_LIST", "ServiceManagementOABill");
    }
    next();
  },
  methods: {
    showHeader(label) {
      // 重置高度
      this.$nextTick(() => {
        this.$refs.customerData.doLayout();
      });
      var list = this.settings["columns"];
      return list ? list.includes(label) : false;
    },
    showFormItem(label) {
      var list = this.settings["conditions"];
      return list ? list.includes(label) : false;
    },
    userNameDialogClose() {
      this.$refs.contractData.validateField("userName");
      this.condition = "";
    },
    // 获取账单列表
    getInvoiceList() {
      this.loading = true;
      const params = {
        characterCode: this.userData.characterCode,
        keyId: this.userData.keyId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      };
      getInvoices(params)
        .then((res) => {
          this.totalCount = res.total;
          this.invoiceList = res.list;
          for (let i = 0; i < this.invoiceList.length; i++) {
            this.invoiceList[i].paymentDate = toTenYMD(this.invoiceList[i].paymentTime);
            this.invoiceList[i].paymentTime = toTime(this.invoiceList[i].paymentTime);
            this.invoiceList[i].billAmount = toThousands(res.list[i].billAmount);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$confirmError(err);
          this.loading = false;
        });
    },
    // 处理分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getInvoiceList();
    },
    // 处理用户姓名的分页
    handleNameCurrentChange(val) {
      this.namePageNo = val;
      this.getKeyId();
    },
    // 关闭Customer Name的对话框
    customerNameClose() {
      this.getUserNameVisible = false;
      this.condition = "";
    },
    // 清空Customer Name搜索框内容
    clearSearchName() {
      this.condition = "";
    },
    // 获取CharacterCode对应的keyId
    getKeyId(event) {
      this.$refs.name.blur();
      const params = {
        characterCode: "OPERATOR",
        pageSize: this.namePageSize,
        pageNo: this.namePageNo,
        condition: this.condition,
      };
      getUserKeyId(params)
        .then((res) => {
          this.nameTotalCount = res.total;
          this.customerData = res.list;
          for (let i = 0; i < this.customerData.length; i++) {
            this.customerData[i]["choose"] = false;
            if (this.customerData[i].oid != null) {
              const len = this.customerData[i].oid.length;
              const temp = this.customerData[i].oid + "";
              this.customerData[i].oidSimple =
                temp.substring(0, 8) + "..." + temp.substring(len - 8, len);
            }
          }
          // console.log(this.customerData)
          this.getUserNameVisible = true;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    // 确定获取的UserName
    confirmUserName(detail) {
      this.userData.characterCode = detail.characterCode;
      this.userData.keyId = detail.keyId;
      this.userName = detail.name;
      this.getUserNameVisible = false;
      this.condition = "";
    },
    // 清空Customer Name
    clearUserName() {
      this.userData.characterCode = "";
      this.userData.keyId = "";
    },
  },
};
</script>

<style scoped>
/* .box {
      margin: 0.2em 0.5em;
      } */
.title-logo {
  font-size: 0.8em;
  margin-left: 0px;
  color: #909399;
}
.box-header {
  font-weight: bold;
  font-size: 1.8em;
  color: #12263f;
}
.textLayout {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.operateIcon {
  display: inline-block;
  width: 40px;
  color: #2c7be5;
}
.operateIcon :hover {
  color: #484ff3;
  cursor: pointer;
}
</style>
